<script setup>

import {onMounted, ref} from 'vue';
import {useRouter} from "vue-router";

import {showToast} from "vant";
import {get} from "../../util/request.js";

const router=useRouter();
const loading = ref(false);
const finished = ref(false);
const isExplanationVisible = ref(false);
const balance = ref({

});
onMounted(() => {
  // 组件挂载后立即调用 fetchBalance 函数
  fetchBalance();
});
const onGetForFree=()=>{
  router.push('/getLearnMoney')
}


function toggleExplanation() {
  isExplanationVisible.value = !isExplanationVisible.value;
}
const fetchBalance =  () => {
  get('user/balance').then( r=>{
    loading.value = false;
    if (r.code == 0){ // 获取成功
      // alert("查询成功")
      balance.value= r.data;
      finished.value = true;
    }else {
      showToast("查询失败")
      // 加载状态结束
    }
  }).catch(function (){
    alert("全部异常")
  });
}
const onClickLeft = () => {
  router.push('/my')
}

</script>

<template>
<h1>我叫喻文波</h1>
  <van-nav-bar
      title="我的消息"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
  />
    <van-cell title="我的学币" is-link @click="fetchBalance">
      <span class="balance">{{balance}}</span> 学币余額
    </van-cell>

    <van-divider content="充值"></van-divider>

    <van-button type="primary" block @click="onCharge()">充值</van-button>

    <van-divider content="免费获得" ></van-divider>

    <van-button type="default" block @click="onGetForFree">免费获得</van-button>

    <div>

      <van-divider @click="toggleExplanation" content="什么是学币?">什么是学币</van-divider>

      <transition name="fade">
        <div v-if="isExplanationVisible" class="explanation">
          <p>学币是仅限于建筑考研虚拟能交易的货币。</p>
          <p>如何使用学币:</p>
          <ul>
            <li>学币可用于发布求助。</li>
            <li>学币可用于课程购买时抵部分金额。</li>
          </ul>
        </div>
      </transition>
    </div>

</template>

<style scoped>.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>